<template>
  <view>
    <my-header></my-header>
    <uni-notice-bar show-icon scrollable text="uni-app 版正式发布，开发一次，同时发布iOS、Android、H5、微信小程序、支付宝小程序、百度小程序、头条小程序等7大平台。" />
    <view class="info-card">
      <view class="info-title">杭州城北网点</view>
      <view class="info-task">今日待办任务：<text class="task-num">5项</text></view>
      <button class="check-btn" @tap="checkPlan">查看近期计划</button>
    </view>
    <view class="two-card pdlr30">
      <view class="card">
        <view class="card-value">{{ cardData.num1 }}</view>
        <view class="card-label">今日发车</view>
      </view>
      <view class="card">
        <view class="card-value">{{ cardData.num2 }}</view>
        <view class="card-label">今日收车</view>
      </view>
      <view class="card">
        <view class="card-value">¥{{ cardData.num3 }}</view>
        <view class="card-label">今日开单</view>
      </view>
      <view class="card">
        <view class="card-value">¥{{ cardData.num4 }}</view>
        <view class="card-label">今日营收</view>
      </view>
      <view class="card" v-for="(item, idx) in linkData" :key="idx">
        <view class="card-value"><uni-icons custom-prefix="iconfont" :type="item.value" size="30" color="#1a6dcc"></uni-icons></view>
        <view class="card-label">{{ item.label }}</view>
      </view>
    </view>
    <uni-card>
      <card-header title="待办任务">
        <view class="create-btn" @tap="taskMore">查看全部</view>
      </card-header>
      <view class="pd20">
        <taskItem :taskData ="taskData" @goto="goto"></taskItem>
      </view>
    </uni-card>
  </view>
</template>

<script>
import localData from '@/static/mock/home.json'; 
import taskItem from '@/components/taskItem'
export default {
  components:{
    taskItem
  },
  data() {
    return {
      linkData: [
        {
          value: "icon-circle-plus-filled",
          label: "创建订单",
          page: "/pages/create-order/index",
        },
        {
          value: "icon-truck1196107easyiconnet",
          label: "车辆验车",
          page: "/pages/vehicle-check/index",
        },
        {
          value: "icon-task",
          label: "回收尾款",
          page: "/pages/vehicle-check/index",
        },
        {
          value: "icon-qianbao",
          label: "统计中心",
          page: "/pages/statistics/index",
        },
      ],
      cardData: localData.cardData,
      taskData: localData.taskData,
    };
  },
  methods: {
    checkPlan() {
      uni.navigateTo({
        url: "/pages/plan/plan",
      });
    },
    async  getList() {

    },
    taskMore() {
      uni.switchTab({
        url: "/pages/tabBar/task/task",
      })
    },
    goto(id){
      uni.navigateTo({
        url: `/pages/inspection/inspection?id=${id}`,
      });
    }
  },
  mounted() {
    this.getList();
  },
};
</script>

<style lang="scss" scoped>
.info-card {
  margin: 30rpx;
  background-color: $uni-primary;
  border-radius: 20rpx;
  padding: 40rpx 30rpx;
  color: white;
  text-align: center;

  .info-title {
    font-size: 42rpx;
    font-weight: 600;
    margin-bottom: 20rpx;
  }

  .info-task {
    font-size: 32rpx;
    margin-bottom: 30rpx;
  }

  .task-num {
    font-weight: 500;
  }

  .check-btn {
    height: 80rpx;
    line-height: 80rpx;
    background-color: transparent;
    border: 1rpx solid #fff;
    color: white;
    font-size: 30rpx;
    border-radius: 8rpx;
    padding: 0 40rpx;
    display: inline-block;
    margin-top: 20rpx;

    &:after {
      border: none;
    }
  }
}
</style>
